import React from 'react'
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'
import Avatar from '@material-ui/core/Avatar'
import UserIcon from '@material-ui/icons/AccountCircle'
import { withStyles } from '@material-ui/core/styles'
import userStyles from './styles/user-style'
import Container from '../layout/Container'

@inject(stores => ({
  user: stores.appState.user,
}))
@observer
class User extends React.Component {
  render() {
    const { classes, children, user: { info } } = this.props
    const userInfo = info || {}

    return (
      <Container>
        <div className={ classes.avatar }>
          <div className={ classes.bg } />
          { userInfo.avatar_url
            ? <Avatar className={ classes.avatarImg } src={ userInfo.avatar_url } />
            : (
              <Avatar className={ classes.avatarImg }>
                <UserIcon />
              </Avatar>
            ) }
          <span className={ classes.userName }>{ userInfo.loginName || '未登录' }</span>
        </div>
        { children }
      </Container>
    )
  }
}

User.wrappedComponent.propTypes = {
  user: PropTypes.object.isRequired,
}

User.propTypes = {
  classes: PropTypes.object.isRequired,
  children: PropTypes.element.isRequired,
}

export default withStyles(userStyles)(User)
